<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 设置title ico图标 -->
    <link rel="icon" href="./img/Logo.ico" type="image/x-icon">
    <title>Guibin啊</title>
    <link rel="stylesheet" type="text/css" href="./css/welcome.css">
</head>
<body>
    <div class="header">
        <div class="logo"></div>
        <a class="protrait">
            <div id="ProtraitLi">
                <ul>
                    <li id="personal">个人中心</li>
                    <li id="users">用户设置</li>
                    <li id="exit">退出登录</li>
                </ul>
            </div>
        </a>
    </div>
    <div class="navigation">
        <button class="closenav"></button>
        <ul class="ulopen">
            <li id="home">首页</li>
            <li id="person">个人中心</li>
            <li id="edit">设置</li>
        </ul>
        <ul class="ulclose">
            <li id="homeclose"></li>
            <li id="personclose"></li>
            <li id="editclose"></li>
        </ul>
    </div>
    <div class="Frame">
        <iframe id="frame" src="./home.html" frameborder="0"></iframe>
    </div>
</body>
<script>
    const frame = document.querySelector('#frame');
    const protrait = document.querySelector('.protrait');
    const logo = document.querySelector('.logo');
    const Home = document.querySelector("#home");
    const person =  document.querySelector('#person');
    const personal = document.querySelector('#personal');
    const edit =  document.querySelector('#edit');
    const users = document.querySelector("#users");
    const closenav = document.querySelector(".closenav");
    const ulopen = document.querySelector(".ulopen");
    const ulclose = document.querySelector(".ulclose");
    const exit = document.querySelector("#exit");
    const homeclose = document.querySelector("#homeclose");
    const personclose = document.querySelector("#personclose");
    const editclose = document.querySelector("#editclose");

    // 头像
    protrait.addEventListener("mouseover",()=>{
        document.querySelector('#ProtraitLi').style.visibility = "visible";
    });
    protrait.addEventListener("mouseout",()=>{
        document.querySelector('#ProtraitLi').style.visibility = "hidden";
    });

    // logo
    logo.addEventListener("click",()=>{
        frame.src="./home.html";
    });

    // 主页
    Home.addEventListener("click",()=>{
        frame.src="./home.html";
    });
    homeclose.addEventListener("click",()=>{
        frame.src="./home.html";
    });

    // 个人中心
    person.addEventListener("click",()=>{
        frame.src = 'https://blog.csdn.net/weixin_46474408';
    });
    personclose.addEventListener("click",()=>{
        frame.src = 'https://blog.csdn.net/weixin_46474408';
    });
    personal.addEventListener("click",()=>{
        frame.src = 'https://blog.csdn.net/weixin_46474408';
    });

    // 设置
    edit.addEventListener("click",()=>{
        frame.src = './users.html';
    });
    editclose.addEventListener("click",()=>{
        frame.src = './users.html';
    });

    // 用户设置
    users.addEventListener("click",()=>{
        frame.src = "./users.html";
    });

    // 退出登录
    exit.addEventListener("click",()=>{
        window.location.replace("./login.html");
    });

    // 导航栏
    var flag = true;
    closenav.addEventListener("click",()=>{
        if(flag){
            // 展开
            closenav.style.background = "url('./img/close.png') #ffffff57";
            closenav.style.backgroundSize = "cover";
            document.querySelector('.navigation').style.width = "200px";
            closenav.style.bottom = "15px";
            closenav.style.left = "146px";
            ulopen.style.visibility = "visible";
            ulclose.style.visibility = "hidden";
            flag = false;
        }else{
            closenav.style.background = "url('./img/open.png') #ffffff57";
            closenav.style.backgroundSize = "cover";
            document.querySelector('.navigation').style.width = "75px";
            closenav.style.bottom = "15px";
            closenav.style.left = "15px";
            ulopen.style.visibility = "hidden";
            ulclose.style.visibility = "visible";
            flag = true;
        }
    });
</script>
</html>